<template>
  <div style="padding: 20px">
    <el-card style="padding: 20px 0;margin: 0;">
      <div class="text item" v-if="!isSmall">
        <table class="row" cellspacing="0" >
          <tr>
            <td :class="objData.checkAnswer == 1 ? 'light' : ''">
              <div class="circle">1</div>
              <div class="content">
                <div class="cont_title">答案收集及检查</div>
                <ul class="cont_text">
                  <li>1、查看并收集异常答案(考务)</li>
                  <li>2、标记并处理未收集的答案（实施）</li>
                  <li>3、点击【检查答案】判断是否检查完成（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.downloadAnswer == 1 ? 'light' : ''">
              <div class="circle">2</div>
              <div class="content">
                <div class="cont_title">下载答案</div>
                <ul class="cont_text">
                  <li>点击【下载】，等待下载成功（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.mergeAnswer == 1  ? 'light' : ''">
              <div class="circle">3</div>
              <div class="content">
                <div class="cont_title">合并答案</div>
                <ul class="cont_text">
                  <li>点击【一键合并】（实施）</li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td :class="objData.calculateScore == 1  ? 'light' : ''">
              <div class="circle">7</div>
              <div class="content">
                <div class="cont_title">导入第三方分数</div>
                <ul class="cont_text">
                  <li>1、点击【导入分值】，等待完成（实施）</li>
                  <li>2、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.validAnswer == 1  ? 'light' : ''">
              <div class="circle">6</div>
              <div class="content">
                <div class="cont_title">填空题录分</div>
                <ul class="cont_text">
                  <li>1、点击【插入答案穷举表】（考务）</li>
                  <li>2、点击操作栏【修改】，修改分值（考务）</li>
                  <li>3、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.qiongju == 1  ? 'light' : ''">
              <div class="circle">5</div>
              <div class="content">
                <div class="cont_title">生成穷举表</div>
                <ul class="cont_text">
                  <li>主办方管理系统生成穷举表（男神）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.importScore == 1  ? 'light' : objData.importScore == 2  ? 'gray' : ''">
              <div class="circle">4</div>
              <div class="content">
                <div class="cont_title">答案校验</div>
                <ul class="cont_text">
                  <li>点击【答案校验】(实施)</li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td :class="objData.checkScore == 1  ? 'light' : ''">
              <div class="circle">8</div>
              <div class="content">
                <div class="cont_title">科目算分，生成分数表</div>
                <ul class="cont_text">
                  <li>
                    1、“单科列表”页，选择科目，点击【计算分值】等待完成（实施）
                  </li>
                  <li>
                    2、“单科列表”页，选择科目，点击【生成表】生成小题分/单科表（实施）
                  </li>
                  <li>3、“总分列表”页，点击【总分配置】配置（实施）</li>
                  <li>4、“总分列表”页，点击【生成总分】生成总分表（实施）</li>
                  <li>5、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.downloadScore == 1  ? 'light' : ''">
              <div class="circle">9</div>
              <div class="content">
                <div class="cont_title">抽验答案</div>
                <ul class="cont_text">
                  <li>1、"总分抽验"页，输入条件抽验（实施）</li>
                  <li>2、“单科列表”页，输入条件抽验（实施）</li>
                  <li>3、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.tiankong == 1  ? 'light' : objData.tiankong == 2 ? 'gray':''">
              <div class="circle">10</div>
              <div class="content">
                <div class="cont_title">获取考生成绩</div>
                <ul class="cont_text">
                  <li>1、点击【下载成绩表至服务器】（实施）</li>
                  <li>2、选择下载总分模板（实施）</li>
                  <li>3、点击【导出考生成绩表】（实施）</li>
                  <li>4、实施完成</li>
                </ul>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="text item" v-else>
        <table class="vertical" cellspacing="0">
          <tr>
            <td :class="objData.checkAnswer == 1  ? 'light' : ''">
              <div class="circle">1</div>
              <div class="content">
                <div class="cont_title">答案收集及检查</div>
                <ul class="cont_text">
                  <li>1、查看并收集异常答案(考务)</li>
                  <li>2、标记并处理未收集的答案（实施）</li>
                  <li>3、点击【检查答案】判断是否检查完成（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.downloadAnswer == 1  ? 'light' : ''">
              <div class="circle">2</div>
              <div class="content">
                <div class="cont_title">下载答案</div>
                <ul class="cont_text">
                  <li>点击【下载】，等待下载成功（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.mergeAnswer == 1  ? 'light' : ''">
              <div class="circle">3</div>
              <div class="content">
                <div class="cont_title">合并答案</div>
                <ul class="cont_text">
                  <li>点击【一键合并】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.importScore == 1  ? 'light' : objData.importScore == 2 ? 'gray':''">
              <div class="circle">4</div>
              <div class="content">
                <div class="cont_title">答案校验</div>
                <ul class="cont_text">
                  <li>点击【答案校验】(实施)</li>
                </ul>
              </div>
            </td>
            <td :class="objData.qiongju == 1  ? 'light' : ''">
              <div class="circle">5</div>
              <div class="content">
                <div class="cont_title">生成穷举表</div>
                <ul class="cont_text">
                  <li>主办方管理系统生成穷举表（男神）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.validAnswer == 1  ? 'light' : ''">
              <div class="circle">6</div>
              <div class="content">
                <div class="cont_title">填空题录分</div>
                <ul class="cont_text">
                  <li>1、点击【插入答案穷举表】（考务）</li>
                  <li>2、点击操作栏【修改】，修改分值（考务）</li>
                  <li>3、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.calculateScore == 1  ? 'light' : ''">
              <div class="circle">7</div>
              <div class="content">
                <div class="cont_title">导入第三方分数</div>
                <ul class="cont_text">
                  <li>1、点击【导入分值】，等待完成（实施）</li>
                  <li>2、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.checkScore == 1  ? 'light' : ''">
              <div class="circle">8</div>
              <div class="content">
                <div class="cont_title">科目算分，生成分数表</div>
                <ul class="cont_text">
                  <li>1、“单科列表”页，选择科目，点击【计算分值】等待完成（实施）</li>
                  <li>
                    2、“单科列表”页，选择科目，点击【生成表】生成小题分/单科表（实施）
                  </li>
                  <li>3、“总分列表”页，点击【总分配置】配置（实施）</li>
                  <li>4、“总分列表”页，点击【生成总分】生成总分表（实施）</li>
                  <li>5、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.downloadScore == 1  ? 'light' : ''">
              <div class="circle">9</div>
              <div class="content">
                <div class="cont_title">抽验答案</div>
                <ul class="cont_text">
                  <li>1、"总分抽验"页，输入条件抽验（实施）</li>
                  <li>2、“单科列表”页，输入条件抽验（实施）</li>
                  <li>3、点击【下一步】（实施）</li>
                </ul>
              </div>
            </td>
            <td :class="objData.tiankong == 1  ? 'light' : objData.tiankong == 2 ? 'gray':''">
              <div class="circle">10</div>
              <div class="content">
                <div class="cont_title">获取考生成绩</div>
                <ul class="cont_text">
                  <li>1、点击【下载成绩表至服务器】（实施）</li>
                  <li>2、选择下载总分模板（实施）</li>
                  <li>3、点击【导出考生成绩表】（实施）</li>
                  <li>4、实施完成</li>
                </ul>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>

</template>

<script>
  import {roadMap} from "@/api/toolsystem/roadMap";

  export default {
    name: "roadMap",
    data() {
      return {
        count: 3,
        objData:{},
        isSmall: false, // 屏幕大小变化改变样式状态
        screenWidth: document.body.clientWidth, // 屏幕宽度
      };
    },
    mounted() {
      const that = this;
      if (that.screenWidth < 768) {
        that.isSmall = true;
      } else {
        that.isSmall = false;
      }
      window.addEventListener("resize", function () {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      });
      this.getRoadMap()
    },
    watch: {
      screenWidth(val) {
        this.screenWidth = val;
        if (this.screenWidth < 768) {
          this.isSmall = true;
        } else {
          this.isSmall = false;
        }
      },
    },
    methods: {
      getRoadMap() {
        roadMap().then(res => {
          console.log(res)
          if(res.code != 200) return this.msgError(res.msg)
          this.objData = res.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";

  table {
    &.row {
      width: 100%;
      padding: 40px 80px;

      tr {
        width: 100%;
        display: flex;

        td {
          height: 200px;
          position: relative;

          .circle {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #fff;
            border: 2px solid #000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -60%);
          }

          .content {
            min-width: 140px;
            position: absolute;
            left: 50%;
            transform: translate(-30%, 20px);
            // transform: translate(-50%, 20px);
            .cont_title {
              font-size: 14px;
              font-weight: bold;
            }

            .cont_text {
              font-size: 12px;
              padding-left: 0;

              li {
                list-style: none;
              }
            }
          }
        }

        &:nth-child(1) {
          td {
            border-top: 2px solid #000;

            &:nth-child(1) {
              margin-left: 12.5%;
              width: 17.5%;

              .circle {
                position: absolute;
                left: 0;
                transform: translate(-50%, -60%);
              }

              .content {
                position: absolute;
                left: 0;
              }
            }

            &:nth-child(2) {
              width: 35%;
            }

            &:nth-child(3) {
              width: 35%;
              border-right: 2px solid #000;
            }
          }
        }

        &:nth-child(2) {
          td {
            flex: 1;
            // text-align: center;
            border-top: 2px solid #000;

            &:nth-child(1) {
              border-left: 2px solid #000;
            }
          }
        }

        &:nth-child(3) {
          td {
            height: 250px;
            border-top: 2px solid #000;

            &:nth-child(1) {
              width: 30%;

              .circle {
                position: absolute;
                left: 45% !important;
              }
            }

            &:nth-child(2) {
              width: 35%;
            }

            &:nth-child(3) {
              margin-right: 17.5%;
              width: 17.5%;

              .circle {
                position: absolute;
                left: 100% !important;
              }

              .content {
                width: 80%;
                position: absolute;
                left: 100%;
              }
            }
          }
        }

        /*高亮*/
        td.light {
          border-color: #1890ff !important;

          .circle {
            color: #1890ff;
            border-color: #1890ff;
          }

          .content {
            color: #1890ff;
          }
        }
        /*置灰*/
        td.gray{
          border-color: rgba(0,0,0, .3) !important;

          .circle {
            color: rgba(0,0,0, .3);
            border-color: rgba(0,0,0, .3);
          }

          .content {
            color: rgba(0,0,0, .3);
          }
        }
      }
    }

    &.vertical {
      width: 80%;
      margin: -140px auto 140px;

      tr {
        width: 100%;

        td {
          display: block;
          border-left: 1px solid #000;
          height: 140px;
          position: relative;

          .circle {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 26px;
            background-color: #fff;
            border: 2px solid #000;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 100%;
            transform: translate(-50%, -50%);
            z-index: 1000;
          }

          .content {
            position: absolute;
            left: 0;
            top: 100%;
            transform: translate(25px, -8px);

            .cont_title {
              font-size: 14px;
              font-weight: bold;
            }

            .cont_text {
              font-size: 12px;
              padding-left: 0;

              li {
                list-style: none;
              }
            }
          }

          &:nth-child(9) {
            height: 200px;
          }

          &:first-child {
            border-left: 0;
          }
        }

        /*高亮*/
        td.light {
          border-color: #1890ff !important;

          .circle {
            color: #1890ff;
            border-color: #1890ff;
          }

          .content {
            color: #1890ff;
          }
        }

        /*置灰*/
        td.gray{
          border-color: rgba(0,0,0, .3) !important;

          .circle {
            color: rgba(0,0,0, .3);
            border-color: rgba(0,0,0, .3);
          }

          .content {
            color: rgba(0,0,0, .3);
          }
        }
      }
    }
  }
</style>
